<template>
  <div>
    <div v-if="!utils.getIsApp()" class="common-header-wrap">
      <mt-header class="common-header" title="白茶视频">
        <mt-button icon="back" slot="left" @click="$router.go(-1)"></mt-button>
      </mt-header>
    </div>
    <!-- <div class="search">
      <input type="text" v-model="course" placeholder="请输入您要搜索的教程" />
      <button>搜索</button>
    </div>
    <img class="banner" src="https://ds.wyadmin.cn/uploads/home/common/default_goods_image.jpg" alt />
    <div class="onLine">
      <h3 class="before">在线直播</h3>
      <div id="video" @click="goList()">
        <img src="https://ds.wyadmin.cn/uploads/home/lives/5f34b32a35c96.jpg" alt />
        <img class="posi" src="../../../assets/image/bofang.png" alt />
      </div>
      <div class="details">
        <div class="views">
          <img src="../../../assets/image/watch.png" alt />
          <span>999w</span>
        </div>
        <div class="love">
          <img src="../../../assets/image/love.png" alt />
          <span>99w</span>
        </div>
      </div>
    </div>
    <h3 class="before">全部视频</h3>
    <div class="whole">
      <div class="couresList" v-for="item in 4" :key="item">
        <div class="text-img" @click="toList()">
          <img
            class="img"
            src="https://ds.wyadmin.cn/uploads/home/common/default_goods_image.jpg"
            alt
          />
          <img class="posi" src="../../../assets/image/bofang.png" alt />
        </div>
        <div class="coures-name">课程名称</div>
        <div class="explain">课程说明,课程简介课程简介课程简介课程简...</div>
      </div>
    </div> -->
    <!-- <img class="course-live" :src="courseinfo.image" @click="tolink">
            <img class="course-play" src="../../../assets/image/home/icon-play.png" @click="tolink">
        <div class="course-title">{{courseinfo.name}}</div>
        <div class="course-switch">
            <div :class="{'active':!nav}" @click="switchnav(0)">目录</div>
            <div :class="{'active':nav}" @click="switchnav(1)">简介</div>
        </div>
        <div v-if="!nav" class="course-list" v-for="(items,index) in courselist" >
            <div class="course-list-head" v-if="items.children.length" @click="switchstage(index)">
                <div class="course-list-title" :class="{'active':stage == index}">{{items.name}}</div>
                <img class="course-icon" :src="stage==index?require('../../../assets/image/home/icon-bottom.png'):require('../../../assets/image/home/icon-right.png')">
            </div>
            <div v-if="stage==index" class="course-list-child" v-for="(item,key) in items.children" @click="chaptertap(item,key)">
                <img :src="item.image">
                <div class="course-list-child-right" :class="{'active':chapter==key}">
                    <div class="course-list-child-title">{{item.name}}</div>
                    <div class="course-list-child-brief">{{item.brief}}</div>
                </div>
            </div>
        </div>
        <div v-if="nav" class="course-brief">
           {{courseinfo.brief}}
    </div>-->

    <div
      style="height: calc(100vh - 2rem);width: 100vw;background: white;display: flex;align-items: center;justify-content: center"
    >
      <img
        style="display: block;margin: 0 auto;width: 100vw;height: auto"
        src="../../../assets/image/home/expect.png"
      />
    </div>
  </div>
</template>

<script>
import { getCourseDetails } from "../../../api/course";
import { Toast, Indicator } from "mint-ui";

export default {
  name: "Course",
  data() {
    return {
      courselist: "", // 白茶教程数据
      courseinfo: "", // 选中白茶教程详情
      params: {
        page: 0,
        per_page: 10,
      },
      loading: false, // 是否加载更多
      isMore: true, // 是否有更多
      nav: 0, // 当前选中目录值 0:目录 1:简介
      stage: 0, // 当前选中期数索引
      chapter: 0, // 当前选中章节索引
      course: "",
      text: this.course ? "搜索" : "取消",
    };
  },
  mounted() {
    this.getCourseDetails();
  },
  methods: {
    // 上拉加载
    loadMore() {
      this.loading = true;
      this.params.page = ++this.params.page;
      if (this.isMore) {
        this.loading = false;
        this.getLiveList();
      }
    },
    // 进入视频播放页面
    toList(){
      
      this.$router.push({
        name: "HomeCourseList",
        // query: { video_Id: item.id },
      });
    },
    // 点击进入直播播放页面
    goList(item) {
      // this.$router.push({
      //   name: "HomePlayback",
      //   query: { video_Id: item.id },
      // });
      console.log(112121)
      return;
      if (item.link_type == 1) {
        window.location.href = item.link;
      } else if (item.link_type == 2) {
        Indicator.open();
        setTimeout(() => {
          Indicator.close();
        }, 300);
        this.$router.push({
          name: "HomePlayback",
          query: { video_Id: item.id },
        });
      }
    },

    // 教程详情
    getCourseDetails() {
      getCourseDetails().then((res) => {
        this.courselist = res.result;
        this.courseinfo = res.result[1].children[0];
        console.log(res.result[1]);
      });
    },

    // 切换栏目
    switchnav(index) {
      this.nav = index;
    },

    // 切换教程期数
    switchstage(index) {
      if (this.stage == index) {
        this.stage = -1;
      } else {
        this.stage = index;
        this.chapter = 0;
        this.courseinfo = this.courselist[index].children[0];
        console.log(this.courselist[index]);
      }
    },

    // 章节点击
    chaptertap(item, index) {
      this.courseinfo = item;
      this.chapter = index;
    },

    // 播放
    tolink() {
      Indicator.open();

      if (this.courseinfo.link_type == 1) {
        window.location.href = this.courseinfo.link;
      } else if (this.courseinfo.link_type == 2) {
        setTimeout(() => {
          Indicator.close();
        }, 300);
        this.$router.push({
          name: "HomeCkplay",
          query: { value: this.courseinfo.link },
        });
      }
    },
  },
};
</script>

<style scoped lang='scss'>
//搜索框
.search {
  width: 100%;
  padding: 0 0.6rem;
  margin-top: 0.65rem;
  box-sizing: border-box;
  input {
    width: 14.3rem;
    height: 1.5rem;
    background-color: #f8f8f7;
    border-radius: 5px;
    color: black;
    border: none;
    margin-right: 0.25rem;
    padding-left: 0.75rem;
    font-size: 0.6rem;
  }
  button {
    width: 2.17rem;
    height: 1.5rem;
    line-height: 1.5rem;
    background-color: #3c7c45;
    font-size: 0.6rem;
    color: #ffffff;
    text-align: center;
    border-radius: 5px;
    border: none;
    outline: none;
  }
}
.banner {
  width: 100%;
  height: 4.9rem;
  margin-top: 0.65rem;
}

// 在线视频
.onLine {
  width: 100%;

  h3 {
    margin: 1rem 0;
  }

  #video {
    width: 100%;
    height: 11.25rem;
    background-color: blueviolet;
    position: relative;

    .posi {
      width: 1.75rem;
      height: 1.75rem;
      position: absolute;
      top: calc(50% - 0.87rem);
      left: calc(50% - 0.87rem);
      z-index: 15;
    }

    img {
      width: 100%;
      height: 100%;
    }
  }
  .details {
    width: 100%;
    display: flex;
    margin-top: 0.55rem;
    margin-top: 1.07rem;
    flex-direction: row-reverse;

    .views {
      padding-right: 1.05rem;
      margin-left: 0.87rem;
    }

    .love,
    .views {
      display: flex;
      vertical-align: middle;
      align-items: center;

      span {
        font-size: 0.6rem;
        color: #b5b5b5;
      }
    }
    .love img {
      width: 0.62rem;
      height: 0.57rem;
      margin-right: 0.4rem;
    }
    .views img {
      width: 0.75rem;
      height: 0.47rem;
      margin-right: 0.4rem;
    }
  }
}
.before {
  color: #3c7c45;
  font-size: 0.8rem;
  margin: 1.1rem 0;
  // padding-left: 0.37rem;
}

//标题加个前缀
.before::before {
  content: "";
  display: inline-block;
  width: 0.17rem;
  height: 0.97rem;
  background-color: #3c7c45;
  position: relative;
  left: 0;
  top: 0.1rem;
  z-index: 12;
  margin: 0 0.37rem 0 0.8rem;
}

// 全部视频
.whole {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  padding: 0 0.37rem 0 0.8rem;

  .couresList {
    width: 8.25rem;
    margin-right: 0.5rem;
    margin-bottom: 0.8rem;

    .text-img {
      position: relative;

      .posi {
        width: 1.75rem;
        height: 1.75rem;
        position: absolute;
        top: calc(50% - 0.87rem);
        left: calc(50% - 0.87rem);
        z-index: 15;
      }
    }

    .img {
      width: 8.25rem;
      height: 6.17rem;
      border-radius: 0.5rem;
    }

    .coures-name {
      font-size: 0.6rem;
      color: #101010;
      margin: 0.45rem 0;
    }

    .explain {
      font-size: 0.45rem;
      color: #b5b5b5;
    }
  }
}

.course-live {
  width: 100vw;
  height: 60vw;
}

.course-play {
  position: absolute;
  top: calc(40px + 22vw);
  left: 0;
  right: 0;
  margin: auto;
  width: 16vw;
  height: 16vw;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 100px;
}

.course-title {
  font-size: 1rem;
  font-weight: bold;
  padding: 20px 0 10px 20px;
}

.course-switch {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 80vw;
  margin: auto;
  border-bottom: 1px solid #efeff2;
  div {
    padding: 10px 0;
    font-size: 0.8rem;
    font-weight: bold;
  }
  .active {
    color: $primaryColor;
    border-bottom: 3px solid $primaryColor;
  }
}

.course-brief {
  width: 80vw;
  margin: auto;
  margin-top: 20px;
  font-size: 0.8rem;
  line-height: 1rem;
}

.course-list {
  padding: 20px;
  border-bottom: 1px solid #efeff2;
  align-items: center;
  .course-list-head {
    display: flex;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .course-icon {
      width: 15px;
      height: 15px;
    }
    .course-list-title {
      font-size: 0.8rem;
      font-weight: bold;
      border-left: 5px solid $primaryColor;
      padding-left: 10px;
    }
    .active {
      color: $primaryColor;
    }
  }
  .course-list-child {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #efeff2;
    .active {
      color: $primaryColor;
    }
    > img {
      width: 35vw;
      height: 21vw;
      border-radius: 8px;
    }
    .course-list-child-right {
      width: calc(100vw - 35vw - 40px - 15px);
      padding: 0 10px;
      height: 21vw;
      .course-list-child-title {
        font-size: 0.9rem;
        font-weight: bold;
      }
      .course-list-child-brief {
        font-size: 0.7rem;
        margin-top: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
  }
  .course-list-child:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
}
</style>
